window.onload = () => {
    // 插入正在进行任务
    let uContent = document.querySelector('.uContent');
    function uCreateNode(data) {
        // 获取原ul节点
        let cul = document.querySelector('.uContent>ul');
        // 创建新ul节点
        let ul = document.createElement('ul');
        data.forEach((item, index) => {
            let li = document.createElement('li');
            let checked = item.state == true ? 'checked' : '';
            li.innerHTML = `
                <input type="checkbox" class="check" ${checked}/>
                <p>${item.name}</p>
                <button class="delTask">✖</button>
            `;
            ul.appendChild(li);
        })
        // 判断是否已存在ul节点，无则插入，有则替换
        if (cul == null) {
            uContent.appendChild(ul);
        } else {
            uContent.replaceChild(ul, cul);
        }

        // 统计数量
        let span = document.querySelector('.underway .titleBox>span');
        span.innerText = uList.length;

        toFinished();
        delUnderway();
    }

    // 插入已经完成任务
    let fContent = document.querySelector('.fContent');
    function fCreateNode(data) {
        // 获取原ul节点
        let cul = document.querySelector('.fContent>ul');
        // 创建新ul节点
        let ul = document.createElement('ul');
        data.forEach((item, index) => {
            let li = document.createElement('li');
            let checked = item.state == true ? 'checked' : '';
            li.innerHTML = `
                    <input type="checkbox" class="check" ${checked}/>
                    <p>${item.name}</p>
                `;
            ul.appendChild(li);
        })
        // 判断是否已存在ul节点，无则插入，有则替换
        if (cul == null) {
            fContent.appendChild(ul);
        } else {
            fContent.replaceChild(ul, cul);
        }

        toUnderway();

        let span = document.querySelector('.finished .titleBox>span');
        span.innerText = fList.length;
    }

    let uList = [];
    let fList = [];

    // 添加任务
    let addList = document.querySelector('.addList');
    addList.onkeydown = (e) => {
        if (e.keyCode == 13 && addList.value != '') {
            let obj = {};
            obj['name'] = addList.value;
            obj['state'] = false;
            uList.push(obj);
            uCreateNode(uList);
            addList.value = '';
        }
    }

    // 移动至 已经完成
    function toFinished() {
        let check = document.querySelectorAll('.uContent .check');
        check.forEach((item, index) => {
            item.onclick = (e) => {

                fList.push(uList[index]);
                fList.forEach((item) => {
                    item.state = true;
                })
                uList.splice(index, 1);

                uCreateNode(uList)
                fCreateNode(fList)
            }
        })
    }

    // 移动至 正在进行
    function toUnderway() {
        let check = document.querySelectorAll('.fContent .check');
        check.forEach((item, index) => {
            item.onclick = (e) => {

                uList.push(fList[index]);
                uList.forEach((item) => {
                    item.state = false;
                })
                fList.splice(index, 1);

                fCreateNode(fList)
                uCreateNode(uList)
            }
        })
    }

    // 删除任务
    function delUnderway() {
        let delTask = document.querySelectorAll('.uContent .delTask');
        delTask.forEach((item, index) => {
            item.onclick = (e) => {
                uList.splice(index, 1);
                uCreateNode(uList)
            }
        })
    }

};